<template>
  <div class="departments -container">
    <div class="app-container">
      <!-- 等待图标加载 -->
      <el-card v-loading="loading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools :node-data="company" :is-root="true" @add-depts="handleAddDepts" />

        <!-- 放置一个el-tree树型组件 -->
        <!-- el-tree 部门
           data:要展示的树状数据展示名
           default-expand-all:树状数据设置展开
         -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <!-- node是el-tree偏底层一点的节点信息 -->
          <!-- data是我们提供的数据层面的信息 -->
          <template #default="{ data }">
            <!-- 注意:多个单词组成属性用-  连接,子组件接收按照小驼峰明名nodeData -->
            <tree-tools :node-data="data" @del-depts="getDepartments" @add-depts="handleAddDepts" @edit-depts="editDepts" />
          </template>
        </el-tree>
      </el-card>
      <!-- 1 :show-dialog.sync="showDialog"
           默认不允许子组件直接更新父组件传递的props值的，但是加上了 .sync
           子组件就可以通过一定的语法，直接更新到父组件的这个数据 （父组件无需进行任何事件注册和处理）

           2 子组件中 this.$emit('update:showDialog', 值)
           只要提交了update的更新，就会将值，更新到父组件中绑定的传值中
      -->
      <!-- 封装新增部门弹框组件 -->
      <!-- sync使用方法
      在属性上添加sync修饰符
      在做子组件内部可以修改值,有特定语法
      this.$emit('update:自定义属性名', )
       -->
      <add-dept
        ref="addDept"
        :node-data="nodeData"
        :dept-list="deptList"
        :show-dialog.sync="showDialog"
        @add-depts="getDepartments"
      />
    </div>
  </div>
</template>

<script>
// 引入封装的树操作栏组件
import TreeTools from './components/tree-tools.vue'
// 引入新增部门组件
import AddDept from './components/add-dept.vue'
import { transListTree } from '@/utils/index'
import { reqGetDepartments } from '@/api/departments'

export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      // 树形的数据
      departs: [],
      // 列表数据
      deptList: [],
      // lable children字段可以根据后台数据自行定义
      // label 标签内容文字
      // children 子节点内容
      defaultProps: {
        label: 'name',
        children: 'children' // 默认为children可不改动
      },
      company: { name: '广东茗仁科技有限公司', manger: '负责人' },
      // 控制
      showDialog: true,
      // 节点下添加子部门
      nodeData: {}, // 正在操作的部门
      loading: false
    }
  },
  created() {
    this.getDepartments()
  },
  // 发送 请求，获取数据，渲染结构
  methods: {
    // 获取所有部门的信息
    async getDepartments() {
      this.loading = true

      const { data: res } = await reqGetDepartments()
      this.company = {
        name: res.companyName,
        manager: '负责人'
      }
      // console.log(transListTree(res.depts, ''))
      // 将列表数据转换为树状数据
      this.departs = transListTree(res.depts, '')
      this.deptList = res.depts // 列表式数据
      this.company = { name: res.companyName, manger: '负责人', id: '' }
      // 导航栏进度条显示设置
      this.loading = false
    },
    handleClose(flag) {
      this.showDialog = false
    },
    // 处理添加操作, 显示弹层
    handleAddDepts(nodeData) {
      // 弹出框显示
      this.showDialog = true // vue渲染是异步dom更新的
      // 保存节点,当父节点用
      this.nodeData = nodeData
    },
    // 编辑部门
    editDepts(nodeData) {
      // 弹出框显示
      this.showDialog = true // vue渲染是异步dom更新的
      // 保存节点,当父节点用
      this.nodeData = nodeData
      this.$nextTick(() => {
        // 显示，发请求获取员工简单列表 (父组件想要调用子组件的方法) ref $refs
        // this.$refs.addDept.getSimpleUserList()  // 也可以在子组件dialog中通过open时去调用
        // this.$refs.addDept.showTitle = '添加部门'
        // this.$refs.addDept.showTitle = '编辑部门'
        this.$refs.addDept.getDepartDetail()
      })
    }
  }
}
// 口诀，只要在显示控制之后，利用$refs操作时，千万要注意 $nextTick 包裹
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 30px;
  font-size:14px;
}
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before  {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
